<nz-layout class="app-layout">
  <nz-sider class="menu-sidebar" nzCollapsible nzWidth="256px" nzBreakpoint="md" [(nzCollapsed)]="isCollapsed"
    [nzTrigger]="null">
    <div class="sidebar-logo">
      <a href="https://ng.ant.design/" target="_blank">
        <img src="https://ng.ant.design/assets/img/logo.svg" alt="logo" />
        <h1>{{ title }}</h1>
      </a>
    </div>
    <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
      <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menus }"></ng-container>
      <ng-template #menuTpl let-menus>
        <ng-container *ngFor="let menu of menus">
          <li *ngIf="menu.type==0 && (!menu.children||menu.children.length==0)" nz-menu-item nzMatchRouter
            [nzDisabled]="menu.disabled" [nzSelected]="menu.selected">
            <i nz-icon nzType="unordered-list" *ngIf="menu.icon"></i>
            <a [routerLink]="menu.url" (click)="actMenu(menu)">{{ menu.name }}</a>
          </li>
          <li *ngIf="menu.type==0 && (menu.children&&menu.children.length>0)" nz-submenu [nzOpen]="menu.open"
            [nzTitle]="menu.name" nzIcon="unordered-list" [nzDisabled]="menu.disabled">
            <ul>
              <div style="padding-left: 24px;">
                <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menu.children }"></ng-container>
              </div>
            </ul>
          </li>
        </ng-container>
      </ng-template>
    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header>
      <div class="app-header">
        <span class="header-trigger" (click)="isCollapsed = !isCollapsed">
          <i class="trigger" nz-icon [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"></i>
        </span>
      </div>
    </nz-header>
    <nz-content>
      <nz-tabset [nzType]="'card'" [(nzSelectedIndex)]="actIndex">
        <nz-tab [nzTitle]="titleTemplate" (nzClick)="navigateWelcome()">
          <ng-template #titleTemplate>
            <div>首页</div>
          </ng-template>
        </nz-tab>
        <nz-tab *ngFor="let tab of tabs" [nzTitle]="titleTemplate" (nzClick)="navigate(tab)">
          <ng-template #titleTemplate>
            <div>{{ tab.tabTitle }}
              <i nz-icon nzType="close" class="ant-tabs-close-x" (click)="closeTab(tab)"></i>
            </div>
          </ng-template>
        </nz-tab>
      </nz-tabset>
      <div class="inner-content">
        <router-outlet></router-outlet>
      </div>
    </nz-content>
  </nz-layout>
</nz-layout>